<template>
  <div class="bar">
    <Arrows :title="titles" />
    <ul>
      <li
        v-for="(item, index) in title"
        :key="index"
        @click="changeIndex(index)"
        :class="activeIndex == index ? 'active' : 'lis'"
      >
        {{ item }}
      </li>
    </ul>
    <div id="AboutPieTwo"></div>
  </div>
</template>
<script>
import axios from "axios";
import Arrows from "../arrows/index.vue";
import { lineList } from "../../api/index";
// var xyz = [
//   [
//     {
//       offset: 0,
//       color: "rgba(0, 217, 221,1)", // 0% 处的颜色
//     },
//     {
//       offset: 0.8,
//       color: "rgba(0, 217, 221,0)", // 100% 处的颜色
//     },
//   ],
//   [
//     [
//       {
//         offset: 0,
//         color: "rgba(35, 250, 187, 1)", // 0% 处的颜色
//       },
//       {
//         offset: 1,
//         color: "rgba(35, 250, 187, 0)", // 100% 处的颜色
//       },
//     ],
//   ],
//   [
//     {
//       offset: 0,
//       color: "rgba(222, 182, 12, 1)", // 0% 处的颜色
//     },
//     {
//       offset: 1,
//       color: "rgba(222, 182, 12, 0)", // 100% 处的颜色
//     },
//   ],
// ];

export default {
  name: "histogram",
  props: ["titles"],
  components: { Arrows },
  data() {
    return {
      //   全网停电按钮高亮
      activeIndex: 0,
      myChart: null,
      list: [],
    };
  },

  mounted() {
    this.getList();
    this.myChart = this.$echarts.init(document.getElementById("AboutPieTwo"));
  },
  computed: {
    title() {
      return this.list.map((r) => r.name);
    },
  },
  watch: {
    list(a, b) {
      this.myChart.setOption({
        legend: {
          textStyle: {
            fontSize: 16, //字体大小
            color: "#9ccef1", //字体颜色
          },
          silent: true,
          data: this.list.map((r, i) => {
            return ["整线停电", "整线未恢复", "支线停电", "支线未恢复"][i];
          }),
          right: "10%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          borderWidth: 0,
          left: 80,
          bottom: 30,
          textStyle: {
            color: "#fff",
          },
        },
        title: {
          subtext: "条.次",
          subtextStyle: {
            color: "#a3d5f7",
            fontSize: 18,
            fontFamily: "Microsoft YaHei",
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#bfd4ee",
              },
            },
            triggerEvent: true,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#a3d5f7ff",
              fontSize: 18,
            },
            data: a[this.activeIndex].children.map((r) => r.name),
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#bfd4ee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#a3d5f7ff",
              fontSize: 20,
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: a.map((r, i) => {
          return {
            name: ["整线停电", "整线未恢复", "支线停电", "支线未恢复"][i],
            type: "bar",
            stack: i > 1 ? "总量i" : "总量",
            barMaxWidth: 35,
            barGap: "10%",
            data: [709, 1917, 2455, 2610, 1719, 1433, 709, 1917, 2455].map(
              (r) => r * Math.ceil(Math.random() * 2)
            ),
            barWidth: "20%", //柱状图宽度
            itemStyle: {
              // "#2abcc9", "red", "yellow"

              color: [
                new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                    // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                    offset: 0,
                    color: "rgba(0, 217, 221,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 217, 221,0)",
                  },
                ]),
                new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                    // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                    offset: 0,
                    color: "rgba(35, 250, 187, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(35, 250, 187, 0)",
                  },
                ]),
              ][i],
              borderRadius: 0,
            },
          };
        }),
      });
    },
  },
  methods: {
    async getList() {
      let { data } = await lineList();
      let ids = 0;
      data.forEach((r) => {
        r.ids = ids++;
        r.color = "#a3d5f7";
      });

      this.list = data.slice(0, 2);
    },
    changeIndex(index) {
      this.activeIndex = index;
      //   let a = this.list.filter((r) => r.id == index);

      this.myChart.setOption({
        xAxis: {
          data: this.list[this.activeIndex].children.map((r) => r.name),
          splitLine: {
            show: false,
          },
          axisTick: { show: false }, //去掉两端的小线段
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.active {
  color: yellow;
  width: 90px;
  height: 35px;
  line-height: 35px;
  text-align: center;

  font-family: Microsoft YaHei;

  font-size: 18px;
  margin-left: 20px;
  text-align: center;
  background: url("../../assets/image/hellowword/MarshallingTwo.png");
  background-size: 100%;
}
.bar {
  margin-top: 20px;
  background: url("../../assets/image/hellowword/BackgroundFour.png") no-repeat;
  background-size: 100%;
  width: 1842px;
  height: 380px;
  padding-top: 20px;
  ul {
    display: flex;
    margin-bottom: 20px;
    .lis {
      width: 90px;
      height: 35px;
      line-height: 35px;
      text-align: center;

      font-family: Microsoft YaHei;
      color: #a3d5f7;
      font-size: 18px;
      margin-left: 20px;
      text-align: center;
      background: url("../../assets/image/hellowword/MarshallingThree.png");
      background-size: 100%;
    }
  }
  #AboutPieTwo {
    width: 2010px;
    height: 270px;
    margin-left: 20px;
  }
}
</style>
